<template>
  <div class="menuCompoent">
    <swiper :options="swiperOption" ref="mySwiper" v-if="menuData.length">
      <swiper-slide v-for="(value, i) in menuData" :key="i">
        <v-container class="demo-container">
          <v-card class="menu_card">
            <v-row class="ma-0">
              <v-col
                @click="goPage(item)"
                cols="4"
                sm="4"
                md="4"
                lg="4"
                class="pa-1"
                xl="4"
                v-for="(item, index) in value"
                :key="index"
              >
                <div
                  v-ripple="{ center: true }"
                  color="rgba(0,0,0,0.2)"
                  :opacity="0.3"
                  class="custom-icon"
                >
                  <!-- <div :style="{opacity:item.isActive?'1':'0.5'}" class="icon-wrapper"> -->
                  <div>
                    <v-avatar
                      tile
                      class="icon-img"
                      v-if="isUseDefaultColor"
                      :color="item.bgColor"
                    >
                      <v-icon size="28" v-if="item.isIcon" dark>{{
                        item.iconName
                      }}</v-icon>
                      <img
                        style="width: 30px !important; height: 30px !important"
                        v-else
                        :src="iconUrl(item)"
                      />
                    </v-avatar>
                    <v-avatar
                      class="icon-img"
                      v-else
                      :color="item.iconColor"
                      tile
                    >
                      <v-icon size="28" v-if="item.isIcon" dark>{{
                        item.iconName
                      }}</v-icon>
                      <img
                        style="width: 30px !important; height: 30px !important"
                        v-else
                        :src="iconUrl(item)"
                      />
                    </v-avatar>
                  </div>
                  <div class="icon-title">{{ item.title }}</div>
                </div>
              </v-col>
            </v-row>
          </v-card>
        </v-container>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <v-row class style="padding: 0 8px" v-else>
      <v-col class="h-25" cols="4" v-for="index of menuExample" :key="index">
        <div class="ex-grid-cell">
          <div class="cell-ex-icon"></div>
          <div class="cell-ex-title"></div>
          <div class="cell-ex-subtitle"></div>
        </div>
      </v-col>
    </v-row>
  </div>
</template>

<script>
import CustomIcon from "./icon";
import "swiper/dist/css/swiper.css";
// import storage from "../utils/storage.js";
import storage from "../utils/storage.js";
import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  name: "IndexMenu",
  components: {
    // eslint-disable-next-line vue/no-unused-components
    CustomIcon,
    swiper,
    swiperSlide,
  },
  props: {
    menuData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // true 表示使用系统自带的背景颜色   false 表示使用数据库自定义颜色
    isUseDefaultColor: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
        },
      },
      activeIndex: 0,
      menueList: [],
      menuExample: Array.from(Array(9), (v, i) => i),
    };
  },
  computed: {},
  methods: {
    iconUrl(item) {
      let url = item.isIcon
        ? ""
        : require("../assets/svg/" + item.iconName + ".png");
      console.log("iconUrl", item);
      return url;
    },
    goPage(item) {
      let pageName = item.rel;
      let menuName01 = "UqcmVehicleQualityCheck"; //整车质量检测
      if (pageName.substring(0, menuName01.length) == menuName01) {
        storage.removeItem("form");
        storage.removeItem("chkBillCitem");
        storage.removeItem("isDisabled"); //按钮是否可用
        storage.removeItem("selectBdDoor");
        storage.removeItem("selectPerson");
        storage.removeItem("vin");
        storage.removeItem("loginName");
      }
      let menuName02 = "UqcmVehicleInStorckConfirm"; //历史缺陷频发问题
      if (pageName.substring(0, menuName02.length) == menuName02) {
        storage.removeItem("vin");
        storage.removeItem("loginName");
      }

      if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
        window.api.openWin({
          name: pageName,
          url: `./${pageName}.html`,
          progress: {
            type: "default",
            text: "加载中",
          },
          delay: 3,
        });
      } else {
        this.$root.api.api.openWin({
          name: pageName,
          url: `./${pageName}.html`,
          progress: {
            type: "default",
            text: "加载中",
          },
          delay: 3,
        });
      }
    },
  },
  mounted() {
    console.log("com", this.menuData);
  },
};
</script>

<style scoped lang="scss">
$icon-bg: rgba(146, 76, 76, 0.05);
.swiper-container {
  // max-height: calc(72vw + 8rem);
  ::v-deep .swiper-pagination-bullet-active {
    background: #888;
  }
}
.ex-grid-cell {
  // height: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2vw;
  // border: 1px solid $icon-bg;
  .cell-ex-icon {
    width: 14vw;
    height: 14vw;
    border-radius: 4vw;
    background: $icon-bg;
    overflow: hidden;
  }
  .cell-ex-title {
    width: 60%;
    height: 0.7rem;
    background: $icon-bg;
    margin-top: 0.4rem;
  }
  .cell-ex-subtitle {
    width: 40%;
    height: 0.4rem;
    margin-top: 0.2rem;
    background: $icon-bg;
  }
}
.demo-container {
  box-sizing: border-box;
  padding: 0;
  padding: 8px 12px;
  height: 100%;
}
.demo-container.is-stripe .col:nth-child(2n) .grid-cell {
  background: rgba(0, 0, 0, 0.54);
}
.h-100 {
  height: 100vh;
}
</style>
<style scoped lang="scss">
::v-deep .mu-avatar {
  border-radius: 8px;
}
.custom-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2vw;
  width: 100%;
  .v-avatar {
    border-radius: 10px !important;
  }
  .v-icon {
    font-size: 2rem;
  }
  .icon-title {
    font-size: 0.8rem;
    width: 96%;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin-top: 0.4rem;
  }
  .icon-title-icon {
    margin-top: 0.4rem;
  }
  .icon-title-img {
    margin-top: 0.4rem;
  }
  .icon-wrapper {
    transition: opacity 0.3s;
  }
  .icon-img {
    width: 14vw !important;
    max-width: 85px !important;
    height: 14vw !important;
    max-height: 85px !important;
    transition: 0.4s;
  }
}
.menuCompoent {
  height: 100%;
  .swiper-container {
    // height: 100%;
    padding-bottom: 24px;
    .swiper-pagination {
      bottom: 0;
    }
    .v-card {
      height: 100%;
      border-radius: 8px;
    }
  }
}
.menu_card {
  min-height: 330px;
  padding: 8px;
  margin-top: 8px;
}
</style>